<template>
<div>

    <div class="role-job-lt">
        <div slot="header" class="clearfix job-tab-header" style="padding-left:13px;">
            <span>已授权岗位</span>
        </div>

        <div class="role-job-lt-bx">
            <div class="filter-container">
                <el-row>
                    <el-form ref="form" label-width="70px" label-position='right' size="small">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="岗位编码">
                                    <el-input placeholder="岗位编码" v-model="listQuery.condition.code.value" clearable>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="岗位名称">
                                    <el-input placeholder="岗位名称" v-model="listQuery.condition.name.value" clearable>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="单位">
                                    <el-input placeholder="单位" v-model="listQuery.condition.unitName.value" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="机构">
                                    <el-input placeholder="机构" v-model="listQuery.condition.orgName.value" clearable></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6" style="float:right;">
                        <el-button size="small" class="filter-item addzz-pr-table-btn" type="success" icon="el-icon-edit" @click="getList">查 询</el-button>
                    </el-col>
                </el-row>
            </div>

            <div class="">
                <el-table ref="multipleTable" :key='tableKey' size="small"
                 :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%;border:#eeeeee" @selection-change="checked">
                    <el-table-column type="selection" width="35">
                    </el-table-column>
                    <el-table-column min-width="120px" label="岗位名称">
                        <template slot-scope="scope">
                      <span>{{scope.row.groupIdOzOrgGroupName}}</span>
                    </template>
                    </el-table-column>
                    <el-table-column min-width="120px" label="所属机构">
                        <template slot-scope="scope">
                      <span>{{scope.row.groupIdOzOrgGroupName}}</span>
                    </template>
                    </el-table-column>
                    <el-table-column min-width="100px" label="所属单位">
                        <template slot-scope="scope">
                      <span>{{scope.row.groupIdOzOrgGroupName}}</span>
                    </template>
                    </el-table-column>
                    <el-table-column min-width="80px" label="岗位状态">
                        <template slot-scope="scope">
                      <span>{{scope.row.groupIdOzOrgGroupStatus | statusFilter}}</span>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-container">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
  compositeSelect
} from '@/api/systemManage/tabPaneJobRight'
import {
  statusOptions,
  statusKeyValue
} from '@/utils/allOptions'

export default {
  props: {
    type: {
      type: String,
      default: 'CN'
    }
  },
  data() {
    return {
      // -------Options-----------
      statusOptions,
      // -------Options-----------
      // table list
      tableKey: 0,
      list: null,
      listQuery: {
        rowBounds: {
          offset: 1,
          limit: 20
        },
        condition: {
          code: {
            'property': 'code',
            'value': '',
            'type': 'LIKE'
          },
          name: {
            'property': 'name',
            'value': '',
            'type': 'LIKE'
          },
          unitName: {
            'property': 'unitName',
            'value': '',
            'type': 'LIKE'
          },
          orgName: {
            'property': 'orgName',
            'value': '',
            'type': 'LIKE'
          }
        },
        fields: [
          'groupId',
          'roleId',
          'groupIdOzOrgGroupName',
          'groupIdOzOrgGroupStatus'
        ],
        sort: [{
          direction: 'ASC',
          property: 'groupId'
        }]
      },
      total: null,
      listLoading: false
      // table list
    }
  },
  filters: {
    statusFilter(target) {
      return statusKeyValue[target]
    }
  },
  mounted() {},
  created() {
    this.$on('refresh-table', function() {
      this.getList()
    })
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      const that = this
      compositeSelect(this.listQuery).then(response => {
        const records = response.data.data.records
        const editlist = new Array(0)
        if (response.data.data.count > 0) {
          for (const item of records) {
            const input = {}
            for (const elem of that.listQuery.fields.values()) {
              input[elem] = item[elem]
            }
            editlist.push(input)
          }
        }
        this.list = editlist
        this.total = response.data.data.count
        this.listLoading = false
      })
    },
    // 检索条件框回车键按下后，跳转到首页
    handleFilter() {
      this.listQuerypage = 1
      this.getList()
    },
    // 翻页器使用
    handleSizeChange(val) {
      this.listQuerypage = 1
      this.listQuery.rowBounds.limit = val
      this.getList()
    },
    // 翻页器使用
    handleCurrentChange(val) {
      this.listQuerypage = val
      this.listQuery.rowBounds.offset =
                this.listQuery.rowBounds.limit * (val - 1) + 1
      this.getList()
    },
    checked() {
      console.log('checked right')
      const selectArr = this.$refs.multipleTable.selection
      const selectIdArr = []
      for (const temp of selectArr) {
        selectIdArr.push(temp.groupId)
      }
      this.$emit('checked-change', selectIdArr)
    }
  }
}
</script>

<style scoped>
.tableArea {
    height: 33vh;
    overflow-y: auto;
}

.searchArea {
    height: 56vh;
    overflow: hidden;
}
</style>
